<template>
  <div class="cpf-root">
    <left-drawer class="left-drawer"></left-drawer>
    <right-drawer class="right-drawer"></right-drawer>

    <el-collapse-transition>
      <bottom-card v-if="listCardVisible" @closeSelfAction="()=>{listCardVisible = false}" class="bottom-card"></bottom-card>
    </el-collapse-transition>
    <lark-map @loaded="mapLoaded" style="position: absolute" ref="cpf-map" :map-config="bufferMapConfig"></lark-map>
  </div>
</template>

<script>
  import { reactive, toRefs, onMounted, ref, computed, nextTick } from '@vue/composition-api'
  import { Message, MessageBox } from 'element-ui'
  import store from '@/store'
  import router from '@/router'
  import mapConfig from '../../../../datas/cpfMapConfig.json'
  import {} from 'lark-map'
  import leftDrawer from './leftDrawer'
  import rightDrawer from './rightDrawer'
  import bottomCard from './bottomCard'

  export default {
    name: 'cpf',
    props: {},
    components: {
      leftDrawer,
      bottomCard,
      rightDrawer
    },
    setup(props, content) {

      let {} = props

      const data = reactive({
        listCardVisible: true,
        bufferMapConfig: mapConfig,
        mapView: null
      })

      const mapLoaded = ({ mapView, mapType }) => {
        data.mapView = mapView
      }

      return { ...toRefs(data), mapLoaded }
    }
  }
</script>

<style scoped lang="scss">
  $full: 100%;
  .cpf-root {
    width: 100%;
    height: 100%;
    position: relative;

    .bottom-card, .right-drawer, .left-drawer, {
      z-index: 10;
      position: absolute;

    }

    .bottom-card {
      bottom: 0;
      left: 12%;
    }


    .right-drawer {
      top: 5%;
      right: 0;
    }

    .left-drawer {
      left: 0;
      top: 5%

    }
  }
</style>
